<template>
  <div class="g_mainView">
    <el-container>
      <el-aside v-if="!state.isMobile">
        <AsideView></AsideView>
      </el-aside>
      <el-drawer @close="store.commit('setShowMenuDrawer', false)" direction="ltr" size="200"
                 v-model="state.showMenuDrawer" :with-header="false">
        <AsideView></AsideView>
      </el-drawer>
      <el-container>
        <el-header>
          <Header></Header>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import Header from './views/header/headerView.vue';
import AsideView from './views/aside/asideView.vue';
import { useOnResize } from '@/hooks/ResizeHandle';
import { useStore } from "vuex";

let store = useStore();
let state = store.state;
useOnResize();
</script>

<style lang="scss">
#app {
}
</style>
<style lang="scss" scoped>
.g_mainView {
  width: 100%;
  height: 100%;
  --nav-color-primary: v-bind('state.setting.themeColor');
  --van-text-color: v-bind('state.setting.fontColor');
  --el-color-primary: var(--nav-color-primary);

  .el-container {
    width: 100%;
    height: 100%;

    :deep(.el-overlay) {
      --el-drawer-padding-primary: 0;

      .el-drawer__body {
        padding: 0;
      }
    }

    .el-header {
      --el-header-height: 50px;
      //border: 1px dashed pink;
      padding: 0 20px;
      box-shadow: 0 1px 4px rgb(0 21 41 / 8%);

      ion-icon {
        cursor: pointer;
      }
    }

    .el-aside {
      //border: 1px dashed deeppink;
      width: auto;

      .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
      }
    }
  }
}
</style>